<template>
    <!-- <div class="login">
        <div class="login-title">
            {{dataTitle}}
        </div>

        <div class="login-box" ref="loginBox">
            <div class="login-card"><img :src="logo" class="logo" alt=""></div>
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                <h4 class="title">质量数字化运营</h4>
                <el-form-item prop="tenantCode" size="small">
                    <el-input v-model="loginForm.tenantCode" type="text" maxlength="10" auto-complete="off" placeholder="请输入企业号">
                        <i slot="prefix" class="el-icon-user login-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="username" size="small">
                    <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名">
                        <i slot="prefix" class="el-icon-user login-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" size="small">
                    <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin">
                        <svg-icon slot="prefix" icon-class="password" class="login-icon-password" />
                    </el-input>
                </el-form-item>
                <el-form-item v-if="captchaOnOff" prop="code" size="small">
                    <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width:60%" @keyup.enter.native="handleLogin">
                        <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon  login-code-icon" />
                    </el-input>
                    <div class="login-code">
                        <img :src="codeUrl" @click="getCode" class="login-code-img" />
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="loginForm.rememberMe" style="margin:0;">记住密码</el-checkbox>
                </el-form-item>
                <el-form-item style="width:100%;" size="small">
                    <el-button :loading="loading" size="small" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                    </el-button>
                    <div style="float: right;" v-if="register">
                        <router-link class="link-type" :to="'/register'">立即注册</router-link>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div> -->
    <div class="page-account template-login-data">
        <div class="page-account-container">
            <div class="page-account-container-slogan">
                <h2>我们的使命：</h2>
                <h1>为人类的可持续未来解决挑战</h1>
                <h2>我们的愿景：</h2>
                <h1>AIoT电池引领全球低碳革命</h1>
                <h2>质量方针：</h2>
                <h1>以品质为基石，持续向客户提供满意的锂电池,成就人类更美好零碳生活。</h1>
            </div>
            <div class="page-account-container-body">
                <div class="page-account-top-desc">重新定义电池，创见美好未来</div>
                <div class="page-account-con">
                    <div class="page-account-top">
                        <div class="page-account-top-logo">
                            <img src="@/assets/images/e-logo.png" alt="logo">
                        </div>
                    </div>
                    <div class="template-login-data-main">
                        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
                            <h4 class="title">QMS 数字化质量平台</h4>
                             <el-form-item prop="tenantCode" size="small">
                                <el-input v-model="loginForm.tenantCode"  maxlength="10" auto-complete="off" placeholder="请输入企业号">
                                    <i slot="prefix" class="el-icon-user login-icon-user"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="username" size="small">
                                <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名">
                                    <i slot="prefix" class="el-icon-user login-icon-user"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password" size="small">
                                <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin">
                                    <svg-icon slot="prefix" icon-class="password" class="login-icon-password" />
                                </el-input>
                            </el-form-item>
                            <el-form-item v-if="captchaOnOff" prop="code" size="small">
                                <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width:60%" @keyup.enter.native="handleLogin">
                                    <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon  login-code-icon" />
                                </el-input>
                                <div class="login-code">
                                    <img :src="codeUrl" @click="getCode" class="login-code-img" />
                                </div>
                            </el-form-item>
                        </el-form>
                        <el-row type="flex" justify="start">
                            <el-checkbox v-model="loginForm.rememberMe" style="text-align:left">记住密码</el-checkbox>
                        </el-row>
                        <el-button :loading="loading" size="small" type="primary" round style="width:100%;margin-top:20px" @click.native.prevent="handleLogin">
                            <span v-if="!loading">登 录</span>
                            <span v-else>登 录 中...</span>
                        </el-button>
                        <div style="float: right;" v-if="register">
                            <router-link class="link-type" :to="'/register'">立即注册</router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
import {getCodeImg} from '@/api/login'
import Cookies from 'js-cookie'
import {decrypt, encrypt} from '@/utils/jsencrypt'

export default {
    name: 'Login',
    data() {
        return {
            dataTitle: '让科技赋能质量，智能质量让企业持续发展',
            codeUrl: '',
            logo: require('@/assets/logo/img.png'),
            loginForm: {
                username: 'enjoy',
                password: 'enjoy',
                rememberMe: false,
                tenantCode: 'enjoy', //企业号
                code: '',
                uuid: '',
            },
            loginRules: {
                tenantCode: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入您的企业号',
                    },
                ],
                username: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入您的账号',
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入您的密码',
                    },
                ],
                code: [
                    {
                        required: false,
                        trigger: 'change',
                        message: '请输入验证码',
                    },
                ],
            },
            loading: false,
            // 验证码开关
            captchaOnOff: false,
            // 注册开关
            register: false,
            redirect: undefined,
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect
            },
            immediate: true,
        },
    },
    created() {
        // this.getCode();
    },
    mounted() {
        this.getCookie()
    },
    methods: {
        getCode() {
            getCodeImg().then((res) => {
                this.captchaOnOff =
                    res.captchaOnOff === undefined ? true : res.captchaOnOff
                if (this.captchaOnOff) {
                    this.codeUrl = 'data:image/gif;base64,' + res.img
                    this.loginForm.uuid = res.uuid
                }
            })
        },
        getCookie() {
            const tenantCode = Cookies.get('tenantCode')
            const username = Cookies.get('username')
            const password = Cookies.get('password')
            const rememberMe = Cookies.get('rememberMe')
            const logo = Cookies.get('logo')
            console.log(username)
            console.log(password)
            logo && (this.logo = logo)
            this.loginForm = {
                tenantCode:   tenantCode === undefined ? this.loginForm.tenantCode : tenantCode,
                username:
                    username === undefined ? this.loginForm.username : username,
                password:
                    password === undefined
                        ? this.loginForm.password
                        : decrypt(password),
                rememberMe:
                    rememberMe === undefined ? false : Boolean(rememberMe),
            }
        },
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true
                    if (this.loginForm.rememberMe) {
                        Cookies.set('tenantCode', this.loginForm.tenantCode, {
                            expires: 30,
                        })
                        Cookies.set('username', this.loginForm.username, {
                            expires: 30,
                        })
                        Cookies.set(
                            'password',
                            encrypt(this.loginForm.password),
                            { expires: 30 }
                        )
                        Cookies.set('rememberMe', this.loginForm.rememberMe, {
                            expires: 30,
                        })
                    } else {
                        Cookies.remove('tenantCode')
                        Cookies.remove('username')
                        Cookies.remove('password')
                        Cookies.remove('rememberMe')
                    }
                    this.$store
                        .dispatch('Login', this.loginForm)
                        .then(() => {
                            this.$router
                                .push({ path: this.redirect || '/' })
                                .catch(() => {})
                        })
                        .catch(() => {
                            this.loading = false
                            // if (this.captchaOnOff) {
                            //   this.getCode();
                            // }
                        })
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.title {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 20px;
    color: #1890ff;
    font-weight: 600;
    letter-spacing: 4px;
}
.template-login-data-main {
    ::v-deep .el-input {
        border-radius: 20px;
    }
}
// ----------------------------------------------------------------
.template-login-data {
    background-image: url('~@/assets/images/bg-login-data3.jpg') !important;
    background-size: cover !important;
    &-main {
        background: #fff;
        border-radius: 10px;
        padding: 16px;
        width: 384px;
        margin: 0 auto;
    }
    &-other {
        text-align: center;
        img {
            margin: 0 16px;
        }
    }
    &-copyright {
        * {
            color: #fff !important;
        }
    }
}
.i-layout-header-trigger {
    height: auto;
    color: #fff;
    &:hover {
        background: transparent;
    }
}

.ivu-login-submit ::v-deep .ivu-btn-primary,
.login-form ::v-deep .ivu-checkbox-checked .ivu-checkbox-inner {
    background: #1890ff;
    border-color: #1890ff;
    &:hover {
        background: #0f85f1;
    }
}
.login-form ::v-deep .ivu-input:hover {
    border-color: #1890ff;
}

.page-account {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    background-image: url('~@/assets/images/bg-login-data3.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;

    &-container {
        flex: 1;
        padding: 32px 0;
        text-align: center;
        margin: 0 auto;
        min-width: 1200px;
        width: 85%;
        display: flex;
        justify-content: flex-end;
        // margin-top: -70px;
        // background: rosybrown;
        position: relative;

        // background: rgba(255, 255, 255, 0.3);
        // opacity: 0.3;
        &-result {
            width: 100%;
        }

        &-body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        &-slogan {
            position: absolute;
            top: 18vh;
            left: 0;
            color: #fff;
            width: 620px;
            // background: rgba(255, 255, 255, 0.3);
            text-align: left;
            transition: 0.3s ease-in-out top;

            h1 {
                // font-size: 5.2vh;
                // font-size: 4vh;
                font-size: 3.6vh;
                color: #fff;
                font-weight: 500;
                letter-spacing: 6px;
                margin-bottom: 48px;
            }

            h2 {
                font-size: 3.6vh;
                color: rgb(104, 185, 66);
                font-weight: 500;
                letter-spacing: 6px;
            }

            h3 {
                margin-top: 20px;
                color: rgba(255, 255, 255, 0.8);
                font-size: 1.6vh;
            }
        }

        @media screen and (max-width: 768px) {
            width: 95%;
        }
    }

    &-tabs {
        .ivu-tabs-bar {
            border-bottom: none;
        }

        .ivu-tabs-nav-scroll {
            text-align: center;
        }

        .ivu-tabs-nav {
            display: inline-block;
            float: none;
        }
    }

    &-top {
        padding: 32px 0;
        width: 320px;

        &-logo {
            img {
                max-height: 98%;
                max-width: 98%;
                height: auto;
                width: auto;
                margin: auto;
            }
        }
    }

    &-con {
        background: rgba(255, 255, 255, 0.3);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        border-radius: 10px;
        overflow: hidden;
    }

    &-top-desc {
        font-size: 26px;
        color: #ffffff;
        margin-bottom: 22px;
        letter-spacing: 8px;
    }

    &-auto-login {
        margin-bottom: 15px;
        text-align: left;
        position: relative;

        a {
            float: right;
        }
    }

    .ivu-poptip,
    .ivu-poptip-rel {
        display: block;
    }

    &-to-login {
        text-align: center;
        margin-top: 16px;
    }

    &-header {
        text-align: right;
        position: fixed;
        top: 16px;
        right: 24px;
    }

    a.ivu-btn-large {
        height: 32px;
        line-height: 32px;
    }
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        z-index: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
    }
}

.template-login-data {
    &-main {
        background: #fff;
        border-radius: 0px;
        padding: 45px 30px 25px 30px;
        width: 320px;

        p {
            margin-top: 0px;
            margin-bottom: 25px;
            font-size: 20px;
            // color: #208cf0;
            color: #1890ff;
            font-weight: 600;
            letter-spacing: 4px;
        }

        .ivu-btn-large {
            border-radius: 25px;
            height: 32px;
            font-size: 12px;
        }

        .ivu-checkbox-wrapper.ivu-checkbox-large {
            font-size: 12px;
            color: #8c8c8c;
        }

        .ivu-form-item-content {
            //  background: #edf1f5;
            height: 32px;
            line-height: 29px;
            box-sizing: content-box;
            border-radius: 25px;
            font-size: 12px;

            .ivu-input {
                height: 30px;
                border-radius: 25px;
                font-size: 12px;
                background: #edf1f5;

                &:focus {
                    box-shadow: none;
                }
            }

            .ivu-btn {
                // color: #208cf0;
                // border: 1px solid #208cf0;
                color: rgb(104, 185, 66);
                border: 1px solid rgb(104, 185, 66);
                padding: 0 8px;
            }

            // .ivu-row{
            //     background: red;
            //     .ivu-input-with-prefix{
            //         background: tan;
            //     }
            // }
        }
    }

    &-other {
        text-align: center;

        img {
            margin: 0 16px;
        }
    }

    &-copyright {
        * {
            color: #fff !important;
        }
    }

    .ivu-divider-inner-text {
        font-size: 12px;
        a {
            color: rgb(104, 185, 66);
        }
    }
}

.i-layout-header-trigger {
    height: auto;
    color: #fff;

    &:hover {
        background: transparent;
    }
}

.ivu-input-prefix,
.ivu-input-suffix {
    i {
        height: 32px;
        line-height: 32px !important;
    }
}

.page-auto-forget {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;

    a {
        color: #8c8c8c;
        margin-left: 20px;
        position: relative;

        &:first-child::after {
            content: '';
            position: absolute;
            top: 23%;
            left: -10px;
            width: 1px;
            height: 60%;
            background: #8c8c8c;
        }
    }
}

@media (min-width: 768px) {
    .page-account {
        // background-image: url('../../assets/svg/body.svg');
        background-image: url('~@/assets/images/bg-login-data3.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .page-account-container {
        padding: 32px 0 24px 0;
        width: 85%;
    }
}

@media (min-width: 480px) and (max-width: 1200px) {
    .page-account-container {
        min-width: 82%;

        &-slogan {
            top: 7vh;
            width: auto;

            h2 {
                margin-bottom: 0px;
                font-size: 16px;
            }

            h1 {
                font-size: 20px;
            }
        }

        &-body {
            margin-top: 70px;
        }
    }

    @media (min-width: 480px) and (max-width: 775px) {
        .page-account-container-slogan {
            width: auto;
            top: 4vh;
        }

        .page-account-top {
            width: 258px;
            padding: 0;
        }

        .page-account-con {
            flex-direction: column;
        }

        .page-account-container {
            flex-direction: column;
            justify-content: center;
        }
    }
}
</style>
